<template>
  <div class="charts-box">
    <el-empty v-if="emptyShow" description="暂无数据"></el-empty>
    <qiun-vue-ucharts v-if="!emptyShow" :key="typeCharts" :type="typeCharts" :opts="opts" :chartData="chartData" />
    <div class="charts-num" v-if='allNum > 0'>
      正常告警：共{{allNum}}条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      误检告警：共{{errAllNum}}条
    </div>
  </div>
</template>

<script>
  // 需要在您的项目内执行 npm i @qiun/vue-ucharts
  import qiunVueUcharts from '@qiun/vue-ucharts'

  export default {
    components: {
      qiunVueUcharts
    },
    data() {
      return {
        allNum: 0,
        errAllNum: 0,
        typeCharts: "line",
        emptyShow: true,
        messageColumns: null,
        chartData: {},
        //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
        opts: {
          color: ["#1890FF", "#EE6666", "#91CB74", "#FAC858", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [10, 60, 0, 15],
          enableScroll: false,
          legend: {},
          xAxis: {
            disableGrid: true,
            title: '告警日期',
          },
          yAxis: {
            showTitle: true,
            data: [
              {
                min: 0,
                title: '告警数量',
              }
            ]
          },
          extra: {
            column: {
              type: "group",
              width: 30,
              activeBgColor: "#000000",
              activeBgOpacity: 0.08
            }
          }
        }
      };
    },
    mounted() {
      this.getServerData();
    },
    methods: {
      getServerData() {
        if (this.messageColumns == null) {
          this.allNum = 0;
          this.errAllNum = 0;
          this.emptyShow = true;
          return;
        }
        this.allNum = this.messageColumns.allNum;
        this.errAllNum = this.messageColumns.errAllNum;
        let res = {
          categories: this.messageColumns.days,
          series: [
            {
              name: "正常告警",
              data: this.messageColumns.nums
            },
            {
              name: "误检告警",
              data: this.messageColumns.errorNums
            }
          ]
        };
        this.emptyShow = false;
        this.chartData = JSON.parse(JSON.stringify(res));
      },
    }
  };
</script>

<style scoped>
  .charts-box {
    width: 100%;
    height: 400px;
    margin: 0 auto;
    position: relative;
  }

  .charts-num {
    width: 66%;
    color: #666;
    text-align: right;
    position: absolute;
    top: -25px;
  }
</style>
